<template>
  <div class="fund-usage">
    <!-- 左侧内容 -->
    <div class="left-content">
      <!-- 累计总次数 -->
      <div class="total-count">
        <el-card shadow="always">
          <div slot="header" class="card-header">
            <span>累计总次数</span>
          </div>
          <div class="count-value">611.508 次</div>
        </el-card>
      </div>

      <!-- 大区域月销售额环比统计 -->
      <div class="sales-statistics">
        <el-table :data="salesData" style="width: 100%">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="time" label="时间"></el-table-column>
          <el-table-column prop="community" label="小区"></el-table-column>
          <el-table-column prop="handledCommunity" label="办理小区"></el-table-column>
        </el-table>
      </div>

      <!-- 其他统计图表 -->
      <div class="other-charts">
        <!-- 圆饼图 -->
        <PieChart :data="pieChartData" />
        <!-- 折线图 -->
        <LineChart :data="lineChartData" />
      </div>
    </div>

    <!-- 中间地图 -->
    <div class="map-container">
      <div id="map" style="height: 400px;"></div>
      <div class="map-stats">
        <el-card shadow="always">
          <div slot="header" class="card-header">
            <span>当日数据</span>
          </div>
          <div class="stat-item">
            <span>当日办理业务量</span>
            <span>548,480</span>
          </div>
          <div class="stat-item">
            <span>当日缴存笔数</span>
            <span>548,480</span>
          </div>
          <div class="stat-item">
            <span>当日缴存金额</span>
            <span>548,480</span>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="right-content">
      <!-- 累计总次数 -->
      <div class="total-count">
        <el-card shadow="always">
          <div slot="header" class="card-header">
            <span>累计总次数</span>
          </div>
          <div class="count-value">611.508 亿</div>
        </el-card>
      </div>

      <!-- 本年办理业务 -->
      <div class="business-stats">
        <el-card shadow="always">
          <div slot="header" class="card-header">
            <span>本年办理业务</span>
          </div>
          <div class="stat-item">
            <span>254.5367</span>
            <span>比同期 40% ↑</span>
          </div>
        </el-card>
      </div>

      <!-- 其他统计图表 -->
      <div class="other-charts">
        <!-- 饼状图 -->
        <PieChart :data="pieChartData" />
        <!-- 折线图 -->
        <LineChart :data="lineChartData" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

// 引入中国地图数据
import 'echarts/map/js/china'; // 引入中国地图数据
import 'echarts/map/js/province/jilin'; // 引入吉林省地图数据


export default {
  components: {
  },
  data() {
    return {
      salesData: [
        { name: '张三丰', time: '2023/10/19', community: '北京市昌平...', handledCommunity: '北京市昌平...' },
        // 更多数据...
      ],
      pieChartData: [
        { value: 24, name: '其他' },
        { value: 10, name: '农业银行' },
        // 更多数据...
      ],
      lineChartData: [
        { date: '2025-4-9', value: 100 },
        { date: '2025-4-15', value: 200 },
        // 更多数据...
      ],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = echarts.init(document.getElementById('map'));
      const option = {
        title: {
          text: '吉林省地图',
          subtext: '',
          left: 'center',
        },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          min: 0,
          max: 2500,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true
        },
        series: [
          {
            name: '访问来源',
            type: 'map',
            map: '吉林', // 使用吉林省地图
            roam: true,
            zoom: 1, // 设置初始缩放级别
            center: [125.3, 43.9], // 设置地图中心点为吉林省地理中心
            itemStyle: {
              normal: {
                label: { show: true }
              },
              emphasis: {
                label: { show: true }
              }
            },
            data: [
              { name: '长春', value: Math.round(Math.random() * 1000) },
              { name: '吉林', value: Math.round(Math.random() * 1000) },
              { name: '四平', value: Math.round(Math.random() * 1000) },
              { name: '辽源', value: Math.round(Math.random() * 1000) },
              // 更多数据...
            ]
          }
        ]
      };
      map.setOption(option);
    },
  },
};
</script>

<style scoped>
.fund-usage {
  display: flex;
  justify-content: space-between;
}

.left-content, .right-content {
  width: 30%;
}

.map-container {
  width: 35%;
  margin: 0 20px;
}

.card-header {
  font-weight: bold;
}

.count-value {
  font-size: 24px;
  font-weight: bold;
}

.stat-item {
  margin-bottom: 10px;
}
</style>
